<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-control" content="no-cache" />
  <meta http-equiv="Cache" content="no-cache" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <!-- favicon -->
  <link rel="shortcut icon" th:href="@{static/main/img/favicon.png}" type="image/x-icon" />

  <!-- title -->
  <title th:text="${systemTitle} ? ${systemTitle} : 'HZERO'"></title>

  <!-- css -->
  <link th:href="@{static/main/css/login.css}" rel="stylesheet" />
  <link th:href="@{static/main/css/bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" />

  <!-- js -->
  <script th:src="@{static/main/js/jquery.min.js}"></script>
  <script th:src="@{static/main/js/jsencrypt.min.js}"></script>
  <script th:src="@{static/main/js/jquery.validate.min.js}"></script>
  <script th:src="@{static/main/js/login.js}"></script>

  <!--/* use for template data */-->
  <template id="templateData" data-linkToFindPwd="/oauth/public/main/password_find.html"
    data-captchaGetUrl="/oauth/public/captcha"
    th:attr="data-languagesJson=${languagesJson},data-copyright=${copyright},data-logoSrc=${logoUrl},data-loginButton=${loginButton},data-userNamePlaceholder=${userNamePlaceholder},data-userNameMessage=${userNameMessage},data-passwordPlaceholder=${passwordPlaceholder},data-passwordMessage=${passwordMessage},data-captchaPlaceholder=${captchaPlaceholder},data-captchaMessage=${captchaMessage},data-findPassword=${findPassword},data-captchaKeyMsg=${captchaKeyMsg},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-phoneMsg=${phoneMsg},data-phonePlaceholder=${phonePlaceholder},data-captchaLoadingMsg=${captchaLoadingMsg},data-accountType=${accountType},data-mobileType=${mobileType},data-isNeedCaptcha=${isNeedCaptcha},data-usernameNotFound=${usernameNotFound},data-loginErrorMsg=${loginErrorMsg},data-openLoginWays=${openLoginWaysJson},data-phone=${phone},data-publicKey=${publicKey},data-accountEncrypt=${accountEncrypt},data-passwordEncrypt=${passwordEncrypt}">
  </template>
</head>

<body>
  <div id="login">
    <div class="login-container login-layout">
      <div class="lang-type">
        <a class="lang-icon" th:each="language:${languages}" th:title="${language.description}"><img
            th:src="'/oauth/static/main/img/' + ${language.code} + '.png'" th:alt="${language.description}"></a>
      </div>
      <div class="login-layout-content">
        <div class="login-tab">
          <div class="login-tabs">
            <div class="login-tabs-tab-nav">
              <span class="login-tabs-tab-nav-icon"
                th:classappend="${param.type != null ? param.type[0] : 'account'} != 'account' ? 'login-tabs-tab-nav-icon-active' : ''">
                <i class="glyphicon glyphicon-user" th:title="${accountType}"></i>
              </span>
              <span class="login-tabs-tab-nav-icon"
                th:classappend="${param.type != null ? param.type[0] : 'account'} == 'account' ? 'login-tabs-tab-nav-icon-active' : ''">
                <i class="glyphicon glyphicon-phone" th:title="${mobileType}"></i>
              </span>
            </div>
            <div class="login-tabs-tab-content">
              <div class="login-tabs-tab-pane  login-tab-pane login-account"
                th:classappend="${param.type != null ? param.type[0] : 'account'} == 'account' ? 'login-tabs-tab-pane-active' : ''">
                <div class="logo">
                  <a href="">
                    <img height="32px" th:src="${logoUrl}?${logoUrl}:'/oauth/static/main/img/logo.png'" alt="HZERO" />
                  </a>
                </div>
                <form id="loginFormAccount">
                  <div class="login-form">
                    <div class="login-form-item login-form-item-with-help">
                      <span class="login-form-item-children">
                        <div class="login-form-explain" th:utext="${loginErrorMsg}"></div>
                      </span>
                    </div>
                    <div class="login-form-item">
                      <span class="login-form-item-children">
                        <span class="login-form-item-children-prefix">
                          <div class="login-input-content">
                            <span class="login-form-input-prefix">
                              <i class="glyphicon glyphicon-user"></i>
                            </span>
                            <div class="form-group login-form-item-children-input">
                              <input name="username" id="username" type="text" class="form-control login-form-input"
                                th:value="${param.username != null ? param.username[0] : ''}"
                                th:placeholder="${userNamePlaceholder}">
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                    <div class="login-form-item">
                      <span class="login-form-item-children">
                        <span class="login-form-item-children-prefix">
                          <div class="login-input-content">
                            <span class="login-form-input-prefix">
                              <i class="glyphicon glyphicon-lock"></i>
                            </span>
                            <div class="form-group login-form-item-children-input">
                              <input name="password" id="password" type="password" class="form-control login-form-input"
                                th:placeholder="${passwordPlaceholder}">
                              <span class="glyphicon glyphicon-eye-close look"></span>
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                    <div class="login-form-item" th:if="${isNeedCaptcha}">
                      <span class="login-form-item-children">
                        <div class="login-row">
                          <div class="login-col-12">
                            <span class="login-form-item-children-prefix">
                              <div class="login-input-content">
                                <span class="login-form-input-prefix">
                                  <i class="glyphicon glyphicon-pencil"></i>
                                </span>
                                <div class="form-group login-form-item-children-input">
                                  <input name="captcha" id="captcha" type="text" class="form-control login-form-input"
                                    th:placeholder="${captchaPlaceholder}">
                                </div>
                              </div>
                            </span>
                          </div>
                          <div class="login-col-12">
                            <a class="login-account-captcha">
                              <img class="login-account-captcha-image" src="/oauth/public/captcha" alt="Captcha" />
                            </a>
                          </div>
                        </div>
                      </span>
                    </div>
                    <div class="login-account-find-password login-form-item">
                      <span class="login-form-item-children">
                        <a th:text="${findPassword}" href="/oauth/public/main/password_find.html" target="_self">
                        </a>
                      </span>
                    </div>
                  </div>
                  <div class="login-form-item">
                    <span class="login-form-item-children">
                      <button type="submit" class="btn btn-primary btn-raised login-account-login-btn"
                        th:text="${loginButton}"></button>
                    </span>
                  </div>
                </form>
                <div class="login-form-item">
                  <span class="login-form-item-children">
                    <div class="login-open-app">
                      <span th:each="openLoginWay:${openLoginWays}" th:title="${openLoginWay.appName}">
                        <form th:action="'/oauth/open/'+${openLoginWay.appCode}+'?channel='+${openLoginWay.channel}"
                          method="POST" target="_self">
                          <button class="login-open-app-icon-btn-wrap" type="submit">
                            <img class="login-open-app-icon" width="40" height="40" type="image"
                              th:src="${openLoginWay.appImage}" th:alt="${openLoginWay.appName}"
                              th:title="${openLoginWay.appName}" />
                          </button>
                        </form>
                      </span>
                    </div>
                  </span>
                </div>
              </div>
              <div class="login-tabs-tab-pane  login-tab-pane login-phone"
                th:classappend="${param.type != null ? param.type[0] : 'account'} != 'account' ? 'login-tabs-tab-pane-active' : ''">
                <div class="logo">
                  <a href="">
                    <img height="32px" th:src="${logoUrl}?${logoUrl}:'/oauth/static/main/img/logo.png'" alt="HZERO" />
                  </a>
                </div>
                <form id="loginFormPhone">
                  <div class="login-form">
                    <div class="login-form-item login-form-item-with-help">
                      <span class="login-form-item-children">
                        <div class="login-form-explain" th:utext="${loginErrorMsg}"></div>
                      </span>
                    </div>
                    <div class="login-form-item">
                      <span class="login-form-item-children">
                        <span class="login-form-item-children-prefix">
                          <div class="login-input-content">
                            <span class="login-form-input-prefix">
                              <i class="glyphicon glyphicon-earphone"></i>
                            </span>
                            <div class="form-group login-form-item-children-input">
                              <input name="phone" id="phone" type="text"
                                th:value="${param.username != null ? param.username[0] : ''}"
                                class="form-control login-form-input" th:placeholder="${phonePlaceholder}">
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                    <div class="login-form-item">
                      <div class="login-form-item-control">
                        <span class="login-form-item-children">
                          <div class="login-row">
                            <div class="login-col-12">
                              <span class="login-form-item-children-prefix">
                                <div class="login-input-content">
                                  <span class="login-form-input-prefix">
                                    <i class="glyphicon glyphicon-pencil"></i>
                                  </span>
                                  <div class="form-group login-form-item-children-input">
                                    <input name="phoneCaptcha" id="phoneCaptcha" type="text"
                                      class="form-control login-form-input" th:placeholder="${captchaLoadingMsg}">
                                  </div>
                                </div>
                              </span>
                            </div>
                            <div class="login-col-12">
                              <button class="btn btn-flat btn-raised login-form-button-captcha"
                                th:text="${captchaLoadingMsg}"></button>
                            </div>
                          </div>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="login-form-item">
                    <span class="login-form-item-children">
                      <button type="submit" class="btn btn-primary btn-raised login-phone-login-btn"
                        th:text="${loginButton}"></button>
                    </span>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer" th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
      </div>
    </div>
  </div>
  <div style="display: none">
    <!--/* because thymeleaf don't let use access request */-->
    <input id="login-hidden-loginButton" type="text" th:value="${loginButton}">
    <input id="login-hidden-defaultUserName" type="password"
      th:value="${param.username != null ? param.username[0] : ''}">
    <input id="login-hidden-loginType" type="password" th:value="${param.type != null ? param.type[0] : ''}">
  </div>

  <div class="login-notification"></div>

</body>

</html>